<template>
  <ScreenModal :title="title" v-model="isVisible" :width="460">
    <div class="spring_box">
      <div class="spring_top spring_content">
        <div class="flex spring_bottom_box">
          <div class="spring_top_title">
            <span class="active_title">门店基本信息</span>
            <span class="cent"></span>
          </div>
        </div>
        <div class="titles">{{ dataList.storeName }}</div>
        <div class="flex_sbp">
          <p>门店联系人:</p>
          <p class="tech">{{ dataList.storeName }}</p>
        </div>
        <div class="flex_sbp">
          <p>联系电话:</p>
          <p>{{ dataList.storeMobile }}</p>
        </div>
        <!-- <div class="flex_sbp">
          <p>所属街办:</p>
          <p>{{ dataList.streetName }}</p>
        </div> -->
        <div class="flex_sbp">
          <p>所属街道:</p>
          <p>{{ dataList.streetName }}</p>
        </div>
        <div class="flex_sbp">
          <p>所属社区:</p>
          <p>{{ dataList.communityName }}</p>
        </div>
        <div class="flex_sbp">
          <p>详细地址:</p>
          <p>{{ dataList.detailAddress }}</p>
        </div>
        <div class="flex_sbp">
          <p>提交时间:</p>
          <p>{{ dataList.createDate }}</p>
        </div>
        <div class="flex_sbp">
          <p>审核状态:</p>
          <p class="shenhe" :class="dataList.beforCheckNum == 0 ? 'daishenhe' : dataList.beforCheckNum == 1 ? 'shenhe-tongguo' : 'bohui'">{{ dataList.beforCheck }}</p>
        </div>
        <div class="flex_sbp">
          <p>设计方案:</p>
          <el-carousel height="10rem" >
            <el-carousel-item v-for="(item,index) in imgageList" :key="index" width="30rem">
              <img @click="showPic(index)" :src="BASE_URL_DBAPI + item" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="showPic" v-show="showPicUrl" @click="hidePic">
      <el-image :src="showPicUrl" fit="cover"  alt="" />
    </div>
  </ScreenModal>
</template>

<script>
  import { MenTouBaoShenDB } from '@/api/index'

  export default {
    data() {
      return {
        title: '门店详情',
        isVisible: false,
        dataList: {},
        BASE_URL_DBAPI: 'https://class.fancysx.com/',
        showPicUrl: '',
        imgageList:[],
      }
    },
    mounted() {
      // this.getlist()
    },
    methods: {
      open(id) {
        this.isVisible = true;
        this.dataList = {};
        this.imgageList = [];
        this.getlist(id)
      },
      getlist(id) {
        MenTouBaoShenDB.getStoreId({ id }).then((res) => {
          this.dataList = res.data[0]
          let imgData = this.dataList.storeRealscene.split(',')
          imgData.forEach((item) => {
            let str = item;
            item = str.replace('.', '-x.')
            this.imgageList.push(item);
          })
        })
      },
      showPic(index) {
        this.showPicUrl = this.BASE_URL_DBAPI + this.imgageList[index]
      },
      hidePic() {
        this.showPicUrl = ''
      }
    },
  }
</script>

<style lang="less" scoped>
  .spring_box {
    width: 100%;
    height: 100%;
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
    .spring_content {
      background: linear-gradient(
              0deg,
              rgba(18, 81, 210, 0.3),
              rgba(33, 158, 255, 0.1)
      );
      border-bottom: 1px solid #219eff;
      border-radius: 1rem;
      .spring_bottom_box {
        border-bottom: 1px solid rgba(185, 224, 255, 0.2);
      }
      .spring_top_title {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 3rem;
        span {
          display: inline-block;
        }
        .active_title {
          font-size: 1.6rem;
          font-family: Source Han Sans SC;
          font-weight: 500;
          color: #ffffff;
          padding: 1rem 2rem;
          // border-bottom: 0.5rem solid #219eff
        }
        .cent {
          width: 2.8rem;
          height: 0.4rem;
          background-color: #219eff;
        }
      }
      .titles {
        color: #25ffe8;
        font-size: 1.8rem;
        font-family: Noto Sans S Chinese;
        font-weight: 400;
        padding: 2.9rem 2rem 2rem 2rem;
      }
      .flex_sbp {
        display: flex;
        font-size: 1.4rem;
        font-family: Noto Sans S Chinese;
        font-weight: 400;
        .tech {
          margin-left: 1.9rem !important;
        }
        &:last-child {
          img {
            width: 25rem;
            height: 14rem;
            margin-left: 3.4rem;
            cursor: pointer;
          }
          margin-bottom: 6rem;
        }

        .shenhe {
          margin-bottom: 1.5rem;
          padding: 0.8rem;
          font-size: 1.4rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          border-radius: 0.5rem;
        }
        .daishenhe {
          background-color: #FF009C;
        }

        .shenhe-tongguo {
          background-color: #00C000;
        }
        .bohui {
          background-color: #ccc;
        }
        p {
          &:nth-child(1) {
            color: #9ed5ff;
            padding-left: 3rem;
            padding-bottom: 2rem;
          }
          &:nth-child(2) {
            color: #ffffff;
            margin-left: 3.4rem;
          }
        }
      }
    }
  }
  .showPic{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.7);
  }

  /deep/ .el-carousel__container{
    width: 30rem;
  }
</style>
